<template>
    <div>
        <echartsList
            :x_data="x_data"
            ref="myEcharts"
            :seriesList="seriesList"
            :name="name"
        ></echartsList>
        <div class="tableTab tab_box_fiance">
            <span
                class="tableBtn"
                :class="{ on: index == timeIdx }"
                @click="onTime(item, key, index)"
                v-for="(item, key, index) in timeType"
                :key="index"
                v-show="isQuarter != key"
            >{{ item }}</span
            >
        </div>
        <div class="table w1021 flex">
            <div
                class="tableTh tableTr flex wrap w220 right"
                v-show="timeIdx !== 2"
            >
                <span class="tableTd">主要指标</span>
                <span
                    :class="{ active_Row: activeRow == 1 }"
                    @click="handSelect(1, 'epsp')"
                    class="tableTd top"
                >基本每股收益（元）</span
                >
                <span
                    :class="{ active_Row: activeRow == 2 }"
                    @click="handSelect(2, 'netProfit')"
                    class="tableTd top"
                >归属母公司净利润（百万元）</span
                >
                <span
                    :class="{ active_Row: activeRow == 3 }"
                    @click="handSelect(3, 'risMnp')"
                    class="tableTd top high"
                >归属母公司<br/>净利润同步增长率（％）</span
                >
                <span
                    :class="{ active_Row: activeRow == 4 }"
                    @click="handSelect(4, 'incB')"
                    class="tableTd top"
                >扣非净利润（百万元）</span
                >
                <span
                    :class="{ active_Row: activeRow == 5 }"
                    @click="handSelect(5, 'incH')"
                    class="tableTd top"
                >营业总收入（百万元）</span
                >
                <span
                    :class="{ active_Row: activeRow == 6 }"
                    @click="handSelect(6, 'risTr')"
                    class="tableTd top"
                >营业总收入同比增长率（％）</span
                >
                <span
                    :class="{ active_Row: activeRow == 7 }"
                    @click="handSelect(7, 'bps')"
                    class="tableTd top"
                >每股净资产（元）</span
                >

                <span
                    :class="{ active_Row: activeRow == 8 }"
                    @click="handSelect(8, 'roer')"
                    class="tableTd top"
                    v-show="timeIdx != 2"
                >净资产收益率—加权（％）</span
                >
                <span
                    :class="{ active_Row: activeRow == 9 }"
                    @click="handSelect(9, 'roed')"
                    class="tableTd top"
                    v-show="timeIdx != 2"
                >净资产收益率—摊薄（％）</span
                >
                <span
                    :class="{ active_Row: activeRow == 10 }"
                    @click="handSelect(10, 'capLab')"
                    class="tableTd top"
                >资产负债比率（％）</span
                >
                <span
                    :class="{ active_Row: activeRow == 11 }"
                    @click="handSelect(11, 'psCr')"
                    class="tableTd top"
                >每股资本公积金（元）</span
                >
                <span
                    :class="{ active_Row: activeRow == 12 }"
                    @click="handSelect(12, 'psUp')"
                    class="tableTd top"
                >每股未分配利润（元）</span
                >
                <span
                    :class="{ active_Row: activeRow == 13 }"
                    @click="handSelect(13, 'psNetVal')"
                    class="tableTd top"
                    v-show="timeIdx != 2"
                >每股经营现金流（元）</span
                >
                <span
                    :class="{ active_Row: activeRow == 14 }"
                    @click="handSelect(14, 'selRint')"
                    class="tableTd top"
                >销售毛利率（％）</span
                >
                <span
                    :class="{ active_Row: activeRow == 15 }"
                    @click="handSelect(15, 'opeStci')"
                    class="tableTd top"
                >存货周转率（次）</span
                >
            </div>
            <div class="tableTr tableBody flex" v-show="timeIdx !== 2">
                <div
                    class="flex wrap w130"
                    v-for="(item, index) in datalist"
                    :key="index"
                >
                    <span class="tableTd">{{ item.enddate | dateFrom }}</span>
                    <span
                        :class="{ active_Row: activeRow == 1 }"
                        @click="handSelect(1, 'epsp')"
                        class="orange tableTd top"
                    >{{ item.epsp | valFrom }}</span
                    >
                    <span
                        :class="{ active_Row: activeRow == 2 }"
                        @click="handSelect(2, 'netProfit')"
                        class="orange tableTd top"
                    >{{ item.netProfit | priceFrom }}</span
                    >
                    <span
                        :class="{ active_Row: activeRow == 3 }"
                        @click="handSelect(3, 'risMnp')"
                        class="orange tableTd top high"
                    >{{ item.risMnp | valFrom }}</span
                    >
                    <span
                        :class="{ active_Row: activeRow == 4 }"
                        @click="handSelect(4, 'incB')"
                        class="orange tableTd top"
                    >{{ item.incB | priceFrom }}</span
                    >
                    <span
                        :class="{ active_Row: activeRow == 5 }"
                        @click="handSelect(5, 'incH')"
                        class="orange tableTd top"
                    >{{ item.incH | priceFrom }}</span
                    >
                    <span
                        :class="{ active_Row: activeRow == 6 }"
                        @click="handSelect(6, 'risTr')"
                        class="orange tableTd top"
                    >{{ item.risTr | valFrom }}</span
                    >
                    <span
                        :class="{ active_Row: activeRow == 7 }"
                        @click="handSelect(7, 'bps')"
                        class="orange tableTd top"
                    >{{ item.bps | valFrom }}</span
                    >
                    <span
                        :class="{ active_Row: activeRow == 8 }"
                        @click="handSelect(8, 'roer')"
                        class="orange tableTd top"
                    >{{ item.roer | valFrom }}</span
                    >
                    <span
                        :class="{ active_Row: activeRow == 9 }"
                        @click="handSelect(9, 'roed')"
                        class="orange tableTd top"
                    >{{ item.roed | valFrom }}</span
                    >
                    <span
                        :class="{ active_Row: activeRow == 10 }"
                        @click="handSelect(10, 'capLab')"
                        class="orange tableTd top"
                    >{{ item.capLab | valFrom }}</span
                    >
                    <span
                        :class="{ active_Row: activeRow == 11 }"
                        @click="handSelect(11, 'psCr')"
                        class="orange tableTd top"
                    >{{ item.psCr | valFrom }}</span
                    >
                    <span
                        :class="{ active_Row: activeRow == 12 }"
                        @click="handSelect(12, 'psUp')"
                        class="orange tableTd top"
                    >{{ item.psUp | valFrom }}</span
                    >
                    <span
                        :class="{ active_Row: activeRow == 13 }"
                        @click="handSelect(13, 'psNetVal')"
                        class="orange tableTd top"
                    >{{ item.psNetVal | valFrom }}</span
                    >
                    <span
                        :class="{ active_Row: activeRow == 14 }"
                        @click="handSelect(14, 'selRint')"
                        class="orange tableTd top"
                    >{{ item.selRint | valFrom }}</span
                    >
                    <span
                        :class="{ active_Row: activeRow == 15 }"
                        @click="handSelect(15, 'opeStci')"
                        class="orange tableTd top"
                    >{{ item.opeStci | valFrom }}</span
                    >
                </div>
            </div>

            <div
                class="tableTh tableTr flex wrap w220 right"
                v-show="timeIdx == 2"
            >
                <span class="tableTd">主要指标</span>
                <span
                    :class="{ active_Row: activeRow == 1 }"
                    @click="handSelect(1, 'eps')"
                    class="tableTd top"
                >基本每股收益（元）</span>
                <span
                    :class="{ active_Row: activeRow == 2 }"
                    @click="handSelect(2, 'risBal')"
                    class="tableTd top"
                >归属母公司净利润（百万元）</span>
                <span
                    :class="{ active_Row: activeRow == 3 }"
                    @click="handSelect(3, 'mniSr')"
                    class="tableTd top high"
                >归属母公司<br/>净利润同步增长率（％）</span>
                <span
                    :class="{ active_Row: activeRow == 4 }"
                    @click="handSelect(4, 'epspDed')"
                    class="tableTd top"
                >扣非净利润（百万元）</span>
                <span
                    :class="{ active_Row: activeRow == 5 }"
                    @click="handSelect(5, 'incD')"
                    class="tableTd top"
                >营业总收入（百万元）</span>
                <span
                    :class="{ active_Row: activeRow == 6 }"
                    @click="handSelect(6, 'trSr')"
                    class="tableTd top"
                >营业总收入同比增长率（％）</span>
                <span
                    :class="{ active_Row: activeRow == 7 }"
                    @click="handSelect(7, 'trEbitda')"
                    class="tableTd top"
                >每股净资产（元）</span>
                <!-- 净资产收益率（％ -->
                <!-- todo -->
                <span
                    :class="{ active_Row: activeRow == 8 }"
                    @click="handSelect(8, 'roer')"
                    class="tableTd top"
                >净资产收益率（％）</span>

<!--                <span
                    :class="{ active_Row: activeRow == 9 }"
                    @click="handSelect(9, 'risCash')"
                    class="tableTd top"
                >资产负债比率（％）</span>-->
                <span
                    :class="{ active_Row: activeRow == 10 }"
                    @click="handSelect(10, 'labEbitda')"
                    class="tableTd top"
                >每股资本公积金（元）</span>
                <span
                    :class="{ active_Row: activeRow == 11 }"
                    @click="handSelect(11, 'orOnfc')"
                    class="tableTd top"
                >每股未分配利润（元）</span>

                <span
                    :class="{ active_Row: activeRow == 12 }"
                    @click="handSelect(12, 'risCash')"
                    class="tableTd top"
                >销售毛利率（％）</span>
                <!--<span
                    :class="{ active_Row: activeRow == 13 }"
                    @click="handSelect(13, 'orOc')"
                    class="tableTd top"
                >存货周转率（次）</span>-->
            </div>
            <div class="tableTr tableBody flex" v-show="timeIdx == 2">
                <div class="flex wrap w130" v-for="(item, index) in datalist" :key="index">
                    <span class="tableTd">{{ item.enddate | dateFrom }}</span>
                    <span
                        :class="{ active_Row: activeRow == 1 }"
                        @click="handSelect(1, 'eps')"
                        class="orange tableTd top"
                    >{{ item.eps | valFrom }}</span>
                    <span
                        :class="{ active_Row: activeRow == 2 }"
                        @click="handSelect(2, 'risBal')"
                        class="orange tableTd top"
                    >{{ item.risBal | priceFrom }}</span>
                    <span
                        :class="{ active_Row: activeRow == 3 }"
                        @click="handSelect(3, 'mniSr')"
                        class="orange tableTd top high"
                    >{{ item.mniSr | valFrom }}</span>
                    <span
                        :class="{ active_Row: activeRow == 4 }"
                        @click="handSelect(4, 'epspDed')"
                        class="orange tableTd top"
                    >{{ item.epspDed | priceFrom }}</span>
                    <span
                        :class="{ active_Row: activeRow == 5 }"
                        @click="handSelect(5, 'incD')"
                        class="orange tableTd top"
                    >{{ item.incD | priceFrom }}</span>
                    <span
                        :class="{ active_Row: activeRow == 6 }"
                        @click="handSelect(6, 'trSr')"
                        class="orange tableTd top"
                    >{{ item.trSr | valFrom }}</span>
                    <span
                        :class="{ active_Row: activeRow == 7 }"
                        @click="handSelect(7, 'trEbitda')"
                        class="orange tableTd top"
                    >{{ item.trEbitda | valFrom }}</span>
                    <span
                        :class="{ active_Row: activeRow == 8 }"
                        @click="handSelect(8, 'roer')"
                        class="orange tableTd top"
                    >{{ item.roer | valFrom }}</span>
<!--                    <span
                        :class="{ active_Row: activeRow == 9 }"
                        @click="handSelect(9, 'risCash')"
                        class="orange tableTd top"
                    >{{ item.risCash | valFrom }}</span>-->
                    <span
                        :class="{ active_Row: activeRow == 10 }"
                        @click="handSelect(10, 'labEbitda')"
                        class="orange tableTd top"
                    >{{ item.labEbitda | valFrom }}</span>
                    <span
                        :class="{ active_Row: activeRow == 11 }"
                        @click="handSelect(11, 'orOnfc')"
                        class="orange tableTd top"
                    >{{ item.orOnfc | valFrom }}</span>
                    <span
                        :class="{ active_Row: activeRow == 12 }"
                        @click="handSelect(12, 'selRint')"
                        class="orange tableTd top"
                    >{{ item.risCash | valFrom }}</span>
                    <!--<span
                        :class="{ active_Row: activeRow == 13 }"
                        @click="handSelect(13, 'orOc')"
                        class="orange tableTd top"
                    >{{ item.orOc | valFrom }}</span>-->
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {mapState} from "vuex";
import echartsList from "./echartsList";

export default {
    components: {
        echartsList,
    },
    name: "tab-1",
    props: {
        tabList: {
            type: Array,
            default: [],
        },
    },
    data() {
        return {
            name: "",
            timeIdx: 0, //时间区间 report-报告期，year-年报，quarter-季度
            timeType: {
                report: "按报告期",
                year: "按年度",
                quarter: "按单季度",
            },
            activeRow: 1, //当前点击的行
            seriesList: [],
            x_data: [],
            datalist: [],
            initData: {
                //配置柱状图数据
                1: {
                    title: "基本每股收益（元)",
                },
                2: {
                    title: "归属母公司净利润（百万元）",
                },
                3: {
                    title: "归属母公司净利润同步增长率（％）",
                },
                4: {
                    title: "扣非净利润（百万元）",
                },
                5: {
                    title: "营业总收入（百万元）",
                },
                6: {
                    title: "营业总收入同比增长率（％）",
                },
                7: {
                    title: "每股净资产（元）",
                },
                8: {
                    title: "净资产收益率—加权（％）",
                },
                9: {
                    title: "净资产收益率—摊薄（％）",
                },
                10: {
                    title: "资产负债比率（％）",
                },
                11: {
                    title: "每股资本公积金（元）",
                },
                12: {
                    title: "每股未分配利润（元）",
                },
                13: {
                    title: "每股经营现金流（元）",
                },
                14: {
                    title: "销售毛利率（％）",
                },
                15: {
                    title: "存货周转率（次）",
                },
                16: {
                    title: "净资产收益率（％）",
                },
            },
            initData_2: {
                //配置柱状图数据
                1: {
                    title: "基本每股收益（元)",
                },
                2: {
                    title: "归属母公司净利润（百万元）",
                },
                3: {
                    title: "归属母公司净利润同步增长率（％）",
                },
                4: {
                    title: "扣非净利润（百万元）",
                },
                5: {
                    title: "营业总收入（百万元）",
                },
                6: {
                    title: "营业总收入同比增长率（％）",
                },
                7: {
                    title: "每股净资产（元）",
                },
                8: {
                    title: "净资产收益率（％）",
                },
                9: {
                    title: "资产负债比率（％）",
                },

                10: {
                    title: "每股资本公积金（元）",
                },
                11: {
                    title: "每股未分配利润（元）",
                },

                12: {
                    title: "销售毛利率（％）",
                },
                13: {
                    title: "存货周转率（次）",
                },
            },
        };
    },
    computed: {
        ...mapState(["isQuarter"]),
    },
    filters: {
        dateFrom(val) {
            return val.substring(0, 10);
        },
        valFrom(val) {
            if (val) {
                return val.toFixed(2);
            }
            return "--";
        },
        priceFrom(val, num = 1000000) {
            return (val / num).toFixed(2);
        },
    },
    watch: {
        tabList: {
            handler(val, oldName) {


                this.handleXData(this.timeIdx);
            },
            immediate: true,
            deep: true,
        },
    },
    mounted() {
        if (this.timeIdx != 2) {
            this.name = this.initData[this.activeRow]["title"];
        } else {
            this.name = this.initData_2[this.activeRow]["title"];
        }
    },
    methods: {
        onTime(item, key, index) {
            this.activeRow = 1;
            this.timeIdx = index;
            this.$emit("onTime", key, index);
        },
        handleXData(index) {
            this.x_data = [];
            this.seriesList = [];
            this.datalist = this.tabList[index].list;
            this.datalist.map((item) => {
                this.x_data.push(item.enddate.substring(0, 10));
                let y_data = 0;
                if (this.timeIdx == 2) {
                    console.log("item.eps", item.eps);
                    if (item.eps) {
                        y_data = item.eps.toFixed(2);
                    }
                } else {
                    if (item.epsp) {
                        y_data = item.epsp.toFixed(2);
                    }
                }
                this.seriesList.push(y_data);
            });
        },
        handSelect(selectRow, key) {
            this.seriesList = [];
            this.activeRow = selectRow;
            if (this.timeIdx != 2) {
                this.name = this.initData[this.activeRow]["title"];
            } else {
                this.name = this.initData_2[this.activeRow]["title"];
            }

            this.datalist.map((item) => {
                let y_data = 0;
                if (selectRow == 2 || selectRow == 4 || selectRow == 5) {
                    y_data = (item[key] / 1000000).toFixed(2);
                } else {
                    if (item[key]) {
                        y_data = item[key].toFixed(2);
                    }
                }
                this.seriesList.push(y_data);
            });
        },
    },
};
</script>

<style lang="scss" scoped>
#myecharts {
    height: 297px;
}

.info {
    margin-top: -30px;
    font-size: 14px;
    font-family: Microsoft YaHei;
    font-weight: 400;
    color: #999999;
    justify-content: center;
}

.active_Row {
    background: #2d3245 !important;
}
</style>